<template>
  <!-- 只用于 日期+时分的选择（不能选择秒） -->
  <el-space size="mini">
    <el-date-picker
      v-model="dateValue"
      type="date"
      :placeholder="placeholder"
      :clearable="clearable"
      :size="size"
      :readonly="readonly"
      :editable="editable"
      :disabled="disabled"
      :disabled-date="disabledDate"
      :prefixIcon="prefixIcon"
      :shortcuts="shortcuts"
      arrow-control
      @change="onchange"
      @blur="onblur"
      @focus="onfocus"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
      style="width:150px"
    ></el-date-picker>
    <el-time-picker
      popper-class="my-minute-popper"
      v-model="timeValue"
      format="HH:mm"
      :clearable="false"
      :disabled-hours="disabledHours"
      :disabled-minutes="disabledMinutes"
      :placeholder="placeholderTime"
      prefix-icon="null"
      @change="onchange"
      @blur="onblur"
      @focus="onfocus"
      style="width:100px"
    ></el-time-picker>
  </el-space>
</template>

<script lang="ts">
import { PropType, defineComponent, ref, watch, onMounted } from 'vue'
import { UPDATE_MODEL_EVENT, ElComponentSize } from '@/utils/constants'
import dayjs from '@/utils/my-dayjs'
import { Dayjs } from 'dayjs';

export default defineComponent({
  props: {
    modelValue: { type: String },
    format: { type: String, default: "YYYY-MM-DD" },//YYYY-MM-DD YYYY-MM YYYY
    placeholder: { type: String, default: "日期" },
    clearable: { type: Boolean, default: true },
    size: { type: String as PropType<ElComponentSize>, default: "medium" },
    readonly: { type: Boolean, default: false },
    editable: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false },
    disabledDate: { type: Function },
    prefixIcon: { type: [String, Object], default: '' },
    shortcuts: { type: Array, default: () => [], },
    disabledHours: { type: Function, default: () => [], },
    disabledMinutes: { type: Function, default: () => [], },
    placeholderTime: { type: String, default: "时间" },
  },
  emits: [UPDATE_MODEL_EVENT, 'change', 'blur', 'focus'],
  setup(props, ctx) {
    const datepicker = ref();
    const dateValue = ref();
    const timeValue = ref();

    const initValue = () => {
      let timestr = props.modelValue;
      if (timestr) {
        let datetime: dayjs.Dayjs = dayjs(null);
        if (timestr.indexOf('T') > 0) {//iso 8601
          let timezone = dayjs.tz.guess();
          datetime = dayjs(timestr).tz(timezone);
          debugger;
        } else if (timestr.length == 19) {
          datetime = dayjs(timestr, 'YYYY-MM-DD HH:mm:ss');
        } else if (timestr.length == 16) {
          datetime = dayjs(timestr, 'YYYY-MM-DD HH:mm');
        } else if (timestr.length == 10) {
          datetime = dayjs(timestr, 'YYYY-MM-DD');
        }
        if (datetime) {
          timeValue.value = datetime.toDate();
          dateValue.value = datetime.format('YYYY-MM-DD');
        }
      }
    }

    watch(
      () => props.modelValue,
      () => {
        initValue();
      }
    )

    onMounted(() => {
      initValue();
    })


    const onchange = (val: any) => {
      dayjs.tz.setDefault(dayjs.tz.guess());
      let date;
      if (dateValue.value) date = dayjs(dateValue.value || null, 'YYYY-MM-DD');
      else date = dayjs(null);
      debugger;
      let time = dayjs(timeValue.value || null);

      let datetime;
      let isoTimeStr: string = "";
      if (date && date.isValid()) {
        datetime = date.clone();
        if (!time || !time.isValid()) {
          time = dayjs();
          timeValue.value = time.toDate();
        }

        datetime = datetime.hour(time.hour());
        datetime = datetime.minute(time.minute());
        datetime = datetime.second(time.second());

        isoTimeStr = datetime.format();//current date in ISO8601, without fraction seconds e.g. '2020-04-02T08:02:17-05:00'
      } else {
        dateValue.value = null;
        timeValue.value = null;
        isoTimeStr = "";
      }
      ctx.emit(UPDATE_MODEL_EVENT, isoTimeStr);
      ctx.emit('change', isoTimeStr);
      console.log('emit change');
    }

    const onblur = () => {
      ctx.emit('blur');
    }

    const onfocus = () => {
      ctx.emit('focus');
    }

    const focus = () => {
      datepicker.value.focus();
    }

    return {
      dateValue,
      timeValue,
      focus,
      onchange,
      onblur,
      onfocus
    }
  }
})
</script>

<style scoped>
</style>
